<template>
    <layout>
      <div class="container">
        <el-breadcrumb separator="/">
        <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item><a>作品列表</a></el-breadcrumb-item>
      </el-breadcrumb>
      <el-row :gutter="20" class="mt-20">
        <el-col :span="8" :offset="0" class="flexCenter">
          <span class="label">标题</span>
          <el-input v-model="form.title" label="" placeholder="请输入名称">
          </el-input>
        </el-col>
        <el-col :span="8" :offset="0"  class="flexCenter">
          <span class="label">类别</span>
          <el-select v-model="form.table" value-key="" placeholder="请选择类别" clearable filterable @change="">
            <el-option v-for="item in typeList"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </el-col>
        <el-col :span="8" :offset="0"  class="flexEnd">
          <el-button type="primary" size="" @click="init()">查询</el-button>
          <el-button type="" size="" @tap.stop="$tools.jump('/pages/article/add')">添加</el-button>
        </el-col>
      </el-row>
      <div class="table mt-20">
        <el-table
          :data="tableData"
          style="width: 100%"
          height="250">
          <el-table-column
            prop="create_time"
            label="创建时间"
            width="">
            <template slot-scope="scope">
              {{ parseTime(scope.row.create_time) }}
            </template>
          </el-table-column>
          <el-table-column
            prop="_id"
            label="类别"
            width="">
            <template slot-scope="scope">
              {{tableName }}
            </template>
          </el-table-column>
          <el-table-column
            prop="title"
            label="标题"
            width="">
          </el-table-column>
          <el-table-column
            prop="operate"
            label="操作"
            width="120">
            <template slot-scope="scope">
            <el-tooltip content="修改" placement="top" effect="dark">
              <el-link type="primary"  @tap.stop="$tools.jump('/pages/article/add?id='+scope.row._id+'&table='+form.table)"><i class="el-icon-edit"></i></el-link>
            </el-tooltip>
            <el-tooltip content="删除" placement="top" effect="dark">
              <el-link type="primary" @tap.stop="removeData(scope.row._id)" style="margin-left:10px;"><i class="el-icon-delete"></i></el-link>
            </el-tooltip>
          </template>
          </el-table-column>
        </el-table>
      </div>
      <div class="pagination mt-20">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="pageIndex"
          :page-sizes="[10, 20, 30, 40,50]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next"
          :total="total">
        </el-pagination>
      </div>
    </div>
    </layout>
</template>

<script>
import layout from '@/layout/index.vue'	
export default {
    components: {layout},
    data () {
        return {
          form:{
            table:'note'
          },
          typeList:[
            {label:'心情随笔',value:'note'},
            {label:'韶华追忆',value:'memory'},
            {label:'个人作品',value:'works'},
          ],
          tableName:'心情随笔',
          tableData:[],
          total:0,
          pageIndex:1,
          pageSize:10,
        };
    },
    onLoad () {
      this.init()
    },
    methods: {
      init(){
        this.total= 0
        this.pageIndex= 1
        this.pageSize= 10
        this.tableData = []
        this.getList()
      },
       // 列表
      getList(){
        const that = this
        const data={
          table:this.form.table,
          title:this.form.title,
          pageIndex:this.pageIndex,
          pageSize:this.pageSize
        }
        this.$Ajax('getPageList',data,res=>{
          console.log(res.data)
          that.tableData = that.tableData.concat(res.data) 
          that.total = res.total
          this.getType()
        })
      },
      removeData(id){
        const that = this
        uni.showModal({
          title: '提示',
          content: '确定删除？',
          success: function (res) {
            if (res.confirm) {
              console.log('用户点击确定');
              const data={
                table:that.form.table,
                id:id,
              }
              that.$Ajax('removeArticle',data,res=>{
                console.log(res.data)
                if(res.code == 200){
                  that.$tools.toast('删除成功')
                  that.init()
                }
              })
            } else if (res.cancel) {
              console.log('用户点击取消');
            }
          }
        });
      },
      getType(){
        const index = this.typeList.findIndex(item=>item.value==this.form.table)
        console.log('index',index)
        if(index > -1){
          this.tableName = this.typeList[index].label
        }else{
          this.tableName = ''
        }
      }
  }
};
</script>

<style scoped>
.container{
  max-width: 1000px;
  margin: 20px auto;
}
.flexCenter{
  display: flex;
  align-items: center;
  align-content: center;
}
.flexEnd{
  display: flex;
  justify-content: flex-end;

}
.label{
  display: inline-block;
  width: 100px;
}

</style>
